import { nextTick } from 'vue';
import '/@/theme/loadingFile.scss';

/**
 * 页面全局 Loading
 * @method start 创建 loading
 * @method done 移除 loading
 */
export const FileLoading = {
	// 创建 loading
	start: () => {
		const bodys: Element = document.body;
		const div = <HTMLElement>document.createElement('div');
		div.setAttribute('class', 'loading-next-file');
		const htmls = `
			<div class="loading-next-file-box">
				<div class="loading-next-file-box-warp" style=" width: 150px;">
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
					<div class="loading-next-file-box-item"></div>
				</div>
				<div style="display: flex;align-items: center;justify-content: center; width: 150px;margin-top:30px;font-size: 20px;color: var(--el-color-primary);">
        导出中,请稍后...
      </div>
			</div>
		`;
		div.innerHTML = htmls;
		bodys.insertBefore(div, bodys.childNodes[0]);
		window.fileLoading = true;
	},
	// 移除 loading
	done: (time: number = 0) => {
		nextTick(() => {
			setTimeout(() => {
				window.fileLoading = false;
				const el = <HTMLElement>document.querySelector('.loading-next-file');
				el?.parentNode?.removeChild(el);
			}, time);
		});
	},
};
